<script setup>
import {computed, ref} from "vue";

const visible = ref(false)

const record = ref({
  content: '',
})
defineExpose({
  open(data) {
    if (!data) return
    console.log(data, 'data')
    record.value = data
    visible.value = true
  }
})
const contentHtml = computed(() => {
  const {content} = record.value
  if (!content) return ''
  return decodeURIComponent(content)
})

</script>

<template>
  <el-dialog title="详情"
             v-model="visible"
             width="80vw"
  >
    <div class="full">
      <el-scrollbar>
        <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                姓名
              </div>
            </template>
            {{ record.jishu_user_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                反馈类型
              </div>
            </template>
            {{ record.jishu_yichang_type_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                创建时间
              </div>
            </template>
            {{ record.date }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="content-wrap">
          <div class="content-title">
            <span>反馈内容:</span>
          </div>
          <div v-html="contentHtml"></div>
        </div>
      </el-scrollbar>
    </div>

  </el-dialog>
</template>

<style scoped lang="scss">
.content-wrap{
  margin-top: 16px;
  .content-title{
    font-size: 18px;
    font-weight: bold;
    color: #3c4353;
    margin-bottom: 8px;
  }
}
</style>
